import React, {
  memo,
  ReactNode,
  useState,
  useMemo,
  useRef,
  ElementRef
} from 'react'
import { Carousel } from 'antd'
import classNames from 'classnames'
import { useAppSelector, shallowEqualApp } from '@/store'
import { Banner } from '@/types/common-types'
import { BannerWrapper, BannerLeft, BannerRight, BannerControl } from './style'

interface IProps {
  children?: ReactNode
}

type ToggleType = 'prev' | 'next'

const TopBanner: React.FC<IProps> = () => {
  const { banners } = useAppSelector(
    (state) => ({
      banners: state.recommend.banners
    }),
    shallowEqualApp
  )
  const [currentIndex, setCurrentIndex] = useState(0)
  const bannerRef = useRef<ElementRef<typeof Carousel>>(null)
  function handleToggle(type: ToggleType): void {
    bannerRef.current && bannerRef.current[type]()
  }
  function handleAfterChange(current: number) {
    setCurrentIndex(current)
  }
  function toggleSlider(index: number, animated: boolean): void {
    bannerRef.current && bannerRef.current.goTo(index, animated)
  }
  // 轮播图渐变
  const bgImageUrl = useMemo(() => {
    let bgImg = banners[currentIndex]?.imageUrl
    if (bgImg) {
      bgImg = bgImg + '?imageView&blur=40x20'
    }
    return bgImg
  }, [currentIndex])
  return (
    <BannerWrapper
      style={{ background: `url('${bgImageUrl}') center center / 6000px` }}
    >
      <div className="banner wrap-v2">
        <BannerLeft>
          <Carousel
            ref={bannerRef}
            autoplay
            effect="fade"
            dots={false}
            speed={0}
            autoplaySpeed={5000}
            afterChange={handleAfterChange}
          >
            {banners.map((banner: Banner) => {
              return (
                <div className="banner-item" key={banner.imageUrl}>
                  <img
                    className="image"
                    src={banner.imageUrl}
                    alt={banner.typeTitle}
                  />
                </div>
              )
            })}
          </Carousel>
          <ul className="dots">
            {banners.map((item, index) => {
              return (
                <li
                  key={item.imageUrl}
                  onClick={() => toggleSlider(index, true)}
                >
                  <span
                    className={classNames('item', {
                      active: currentIndex === index
                    })}
                  ></span>
                </li>
              )
            })}
          </ul>
        </BannerLeft>
        <BannerRight>
          <p className="download-text">PC 安卓 iPhone WP iPad Mac 六大客户端</p>
        </BannerRight>
        <BannerControl>
          <button
            className="btn left"
            onClick={() => handleToggle('prev')}
          ></button>
          <button
            className="btn right"
            onClick={() => handleToggle('next')}
          ></button>
        </BannerControl>
      </div>
    </BannerWrapper>
  )
}

export default memo(TopBanner)
